<template>
    <div class="heart">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/company/companyInfo' }">企业</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a>震动设备检测</a></el-breadcrumb-item
        >
      </el-breadcrumb>
      <div class="search">
        <div class="inp">
          <span style="margin-right: 15px">公司名称</span>
          <el-input v-model="companyName" style="width: 240px; margin-right: 40px" placeholder="请输入公司名称" />
          <span style="margin-right: 15px">设备MIN</span>
          <el-input v-model="minCode" style="width: 240px" placeholder="请输入设备MIN" />
        </div>
        <el-button type="primary" style="width: 80px;">查询</el-button>
      </div>
      <el-card style="height: 70px; margin-top: 20px;" shadow="hover">
        <el-button type="primary" style="width: 100px;">添加生产线</el-button>
      </el-card>
      <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
      @sort-change="handleSort"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="创建日期" sortable >
        <template #default="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column prop="companyName" label="企业名称" />
      <el-table-column prop="lineName" label="产线名称" />
      <el-table-column prop="instrumentName" label="设备名" />
      <el-table-column prop="instrumentNumber" label="设备编号" />
      <el-table-column prop="operator" label="设备运营商" />
      <el-table-column label="图片">
        <template #default="scope">
          <img :src="scope.row.imgUrl" style="width: 50px; height: 50px" />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button   v-if="scope.row.isUsing == true"
            >禁用</el-button
          >
          <el-button
            type="danger"
            
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination v-model:page="page"  :total="total" @pagination="getData" />
    </div>
    </div>
      
  </template>
  <script lang="ts" setup>
  import { ref, watch, onMounted, reactive,  } from 'vue'
  import Pagination from '../../components/Pagination.vue'
    let companyName =  ref('')
    let minCode = ref<number>()
    onMounted(()=>{
      console.log(tableData.value)
    })
    const tableData = ref([
      {
          "id":1,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
        {
          "id":2,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
        {
          "id":3,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
        {
          "id":4,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
        {
          "id":5,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
        {
          "id":6,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
        {
          "id":7,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
        {
          "id":8,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
        {
          "id":9,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
        {
          "id":10,
          "companyName": "武汉大学",
          "lineName": "产线一",
          "instrumentName": "设备一",
          "instrumentNumber": "1111",
          "operator": "武汉数控",
          "imgUrl": require("../../assets/logo.png"),
          "status": "正常",
          "isUsing": true,
          "createTime": "1981-07-06",
        },
    ])
    interface Shake {
      id: number,
      companyName: string,
      lineName: string,
      instrumentName: string,
      instrumentNumber: string,
      operator: string,
      imgUrl: string,
      status: string,
      isUsing: boolean
    }
    let selected = ref<number[]>([])
    const handleSelectionChange = (a:Shake[])=>{
      selected.value = [];
      a.forEach((row:Shake)=>{
        selected.value.push(row.id)
      })
      console.log(selected.value)
    }
  
    let handleSort = (data: {column: any, prop: string, order: any })=>{
      console.log(data)
    }
    let currentPage = ref(1)
    let pageSize = ref(10)
    let total = ref(100)
    let page = ref(1)

  </script>
  <style>
    .heart{
      width: 95%;
      margin: 20px auto;
    }
    .search{
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
  </style>